<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const { ref, reactive, toRefs, readonly } = Vue;
    const app = Vue.createApp({
      template: `
    <h2>我的信息</h2>
        <h2>姓名：{{name}}</h2>
        <h2>年龄：{{age}}</h2>
        <h2>岗位：{{job.type}}</h2>
        <h2>薪资：{{job.salary}}</h2>`,
        setup(props) {
        let name=ref('polk')
        let age=ref(23)
        let job=reactive({type:'java初级工程师',salary:'18k'})
        let {type,salary}=toRefs(job)
        setTimeout(()=>{
            job.type='JAVA中级工程师'
            job.salary='25k'
            console.log(job)
        },2000);
      return{name,age,job,type,salary}
    }
    })
  app.mount("#app")
  </script>
</html>
